<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" media="all"/>
		<script type="text/javascript" src="../layui/layui.all.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title">
			<legend>表格数据维护</legend>
			<form action="" method="post" class="layui-form" lay-filter="test1">
				<div class="layui-form-item">
					<label class="layui-form-label">姓名：</label>
					<div class="layui-input-inline">
						<input class="layui-input" type="text" id="name2" placeholder="请输入查询姓名"><br>
					</div>
					
					<label class="layui-form-label">地址：</label>
					<div class="layui-input-inline" lay-select lay-filter="sel1">
						<select id="address2">
							<option >北京</option>
							<option >上海</option>
							<option >南京</option>
							<option >天津</option>
						</select>
					</div>
					<div class="layui-form-mid layui-word-aux">请选择查询地址</div>				
				</div>
				<div class="layui-input-block">
					<input type="button" class="layui-btn" id="sel" value="搜索" />
					<input type="button" class="layui-btn" id="add" value="添加" />
				</div>	
				
				<table class="layui-table" style="width:99%" >
					<thead>
						<tr>
							<th style="width: 10%; text-align: left;">ID</th>
							<th style="width: 20%; text-align: left;">姓名</th>
							<th style="width: 15%; text-align: left;">性别</th>
							<th style="width: 25%; text-align: left;">爱好</th>
							<th style="width: 10%; text-align: left;">地址</th>
							<th style="width: 20%; text-align: left;">操作</th>
						</tr>
					</thead>
					<tbody id="tbody"></tbody>
				</table>
			</form>
		</fieldset>
		
		<script type="text/javascript">
			var form = layui.form;
			form.render();
			
			var $ =layui.jquery;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var laytpl = layui.laytpl;
			var id = 1;
			
			// 绑定事件
			$("#add").click(openDialog);
			$("#sel").click(testselect);
			
			function openDialog(){
				layer.open({
					type:1,
					title:"添加数据",
					closeBtn:2,
					area:["500px","460px"],
					shadeClose:true,
					content:$("#aa").html(),
					success:function(){
						$('input[title="男"]').attr("checked",true);
						$("#b1").click(testadd);
						$("#b2").click(closeLayer);
						
						form.render();
					}	
				})
			}
			
			function testadd(){
				var name = $("#name").val()
				var sex = $('input[name="sex"]:checked').val();
				var temp = $('input[name="habit"]:checked');
				var habit = getHabit(temp);
				var address = $("#address").val();
				
				//模板引擎	
				var data ={id:id,name:name,sex:sex,habit:habit,address:address};
				var html = $("#tradd").html();
				html = laytpl(html).render(data);
				
				$("#tbody").append(html);
				closeLayer();
				id++;
			}
			
			function closeLayer(){
				layer.close(layer.index);
			}
			
			function getHabit(temp){
				var thabit = new Array();
				temp.each(function(i){
				    thabit[i] = $(this).val();
				});
				var habit ='';
				for(i=0;i<thabit.length-1;i++){
					habit = habit + thabit[i]+" ";
				}
				habit = habit + thabit[thabit.length-1];
				return habit;
			}
			
			function testdel(id){
				layer.confirm("是否删除该行记录？",function(index){
					$("#tr"+id).remove();
					layer.close(index);
				})
			}
			
			function testselect(){
				$("tr").css("background-color","");
				var sName = $("#name2").val();
				var sAddress = $("#address2").val();
				if(sName="")
					return;
				$("tr").each(function(){
					if($(this).find("td[id^='tdb']").text().indexOf(sName)>-1&&$(this).find("td[id^='tde']").text().indexOf(sAddress)>-1){
						$(this).css("background-color","green");
					}
				})
			}
			
			function testupdate(vid){
				layer.open({
					type:1,
					title:"数据修改",
					closeBtn:2,
					area:["500px","460px"],
					shadeClose:true,
					content:$("#aa").html(),
					success:function(){
						$("#b2").click(closeLayer);
						
						var name =$("#tdb"+vid).html();
						var sex =$("#tdc"+vid).html();
						var habit =$("#tdd"+vid).html().split(" ");
						var address =$("#tde"+vid).html();

						$("#name").val(name);
						if(sex=="男"){
							$('input[title="男"]').attr("checked",true);
						}else{
							$('input[title="女"]').attr("checked",true);
						}
						var thabit = $('input[name="habit"]');
						for(var i=0;i<habit.length;i++){										
							switch(habit[i]){
								case("唱歌"):
									$('input[title="唱歌"]').attr("checked",true);
									break;
								case("跑步"):
									$('input[title="跑步"]').attr("checked",true);	
									break;
								case("游泳"):
									$('input[title="游泳"]').attr("checked",true);	
									break;					
							}
						}
						
						switch(address){
							case("北京"):
								$("#sel1").attr("selected",true);
								break;
							case("上海"):
								$("#sel2").attr("selected",true);
								break;
							case("南京"):
								$("#sel3").attr("selected",true);
								break;
							case("天津"):
								$("#sel4").attr("selected",true);
								break;
						}
						
						form.render();
						$("#b1").click({vid:vid},testsave);
					}
				})
			}
			
			function testsave(event){
				var vid = event.data.vid;
				var temp = $('input[name="habit"]:checked');
				$("#tdb"+vid).html($("#name").val());
				$("#tdc"+vid).html($('input[name="sex"]:checked').val());
				$("#tdd"+vid).html(getHabit(temp));
				$("#tde"+vid).html($("#address").val());
				$("#tdf"+vid).html("<a href='javascript:testdel("+vid+");'class='layui-btn layui-btn-xs layui-btn-danger'><i class='layui-icon layui-icon-delete'></i></a><a href='javascript:testupdate("+vid+");' class ='layui-btn layui-btn-xs'>修改</a>");
				closeLayer();
			}
			
		</script>
		
		<script type="text/html" id="aa">	
			<form action="" method="post" class="layui-form" lay-filter="test2">
				<div class="layui-form-item">
					<label class="layui-form-label">姓名：</label>
					<div class="layui-input-inline">
						<input class="layui-input" type="text" id="name" placeholder="请输入姓名">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">性别：</label>
					<input type="radio" name='sex' value="男" title="男"/>				
					<input type="radio" name='sex' value="女" title="女"/>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">爱好：</label>
					<div class="layui-input-block">
						<input type="checkbox" name="habit" value="唱歌" title="唱歌"/>
						<input type="checkbox" name="habit" value="跑步" title="跑步"/>
						<input type="checkbox" name="habit" value="游泳" title="游泳"/>
					</div>
				</div>	
				
				<div class="layui-form-item">
						<label class="layui-form-label">地址：</label>
						<div class="layui-input-inline" lay-select lay-filter="sel1">
							<select id="address">
								<option id="sel1">北京</option>
								<option id="sel2">上海</option>
								<option id="sel3">南京</option>
								<option id="sel4">天津</option>
							</select>
						</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="button" id="b1" class="layui-btn" value="确定" />
						<input type="button" id="b2" class="layui-btn" value="取消" />
					</div>		
				</div>	
			</form>	
		</script>
		
		<script type="text/text" id='tradd'>
			<tr id='tr{{d.id}}'>
				<td id='tda{{d.id}}'>{{d.id}}</td>
				<td id='tdb{{d.id}}'>{{d.name}}</td>
				<td id='tdc{{d.id}}'>{{d.sex}}</td>
				<td id='tdd{{d.id}}'>{{d.habit}}</td>
				<td id='tde{{d.id}}'>{{d.address}}</td>
				<td id='tdf{{d.id}}'>
					<a href="javascript:testdel({{d.id}})"
						class="layui-btn layui-btn-xs layui-btn-danger">
						<i class="layui-icon layui-icon-delete"></i>
					</a>
					<a href="javascript:testupdate({{d.id}})"
						class="layui-btn layui-btn-xs">
						修改
					</a>
				</td>
			</tr>
		</script>
		
		
	</body>
</html>
